<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouterNavigation } from "@/router/utils";
import { useRoute } from "vue-router";
const { go } = useRouterNavigation();
import { dealDataExcept } from "@/utils/common";
import { useColumns } from "../utils/columns";
const { showFeeColumns, showBrandColumns } = useColumns();
import { ImageViewer } from "@/components/common/ImageViewer";
import { DictTag } from "@/components/common/DictTag";

// icons
import arrowLeft from "@iconify-icons/ep/arrow-left";

// api
import { getGoodsDetail } from "@/api/basicArchives/goods";
import { getBrandPage } from "@/api/basicArchives/brand"; // 品牌
import { getStoreSimplePage } from "@/api/basicArchives/storeManagement"; // 门店

// 富文本
import WangEditor from "@/components/common/WangEditor";

// 轮播图引入
import ThumbsSwiper from "@/components/common/ThumbsSwiper";

// table 是否显示展开更多图标
const iconHide = ({ row }) => {
  if (!row.storeList || row.storeList.length == 0) {
    return "icon-no";
  }
};

// 处理品牌列表
const dealBrandList = (goodsSpecBrandRelList, storeList, brandList) => {
  // bizType	业务类型 1品牌 0门店
  let brandGoodsPrice = [];
  let storeGoodsPrice = [];
  goodsSpecBrandRelList.forEach(v => {
    v.id = v.bizId;
    v.discountSalePrice = dealDataExcept(v.discountSalePrice);
    v.storeBuyPrice = dealDataExcept(v.storeBuyPrice);
    v.storeSalePrice = dealDataExcept(v.storeSalePrice);
    v.score = dealDataExcept(v.score);
    v.discountScore = dealDataExcept(v.discountScore);
    if (v.bizType == 1) {
      // 品牌
      v.brandName = brandList.find(i => i.id == v.bizId)?.brandName || "--";
      brandGoodsPrice.push(v);
    } else {
      // 门店
      let obj = storeList.find(i => i.id == v.bizId);
      if (obj) {
        v.brandId = obj.brandId;
        v.brandName = obj.storeName;
      }
      storeGoodsPrice.push(v);
    }
  });

  return brandGoodsPrice.map(v => {
    // 处理门店
    v.storeList = storeGoodsPrice.filter(i => i.brandId == v.bizId);
    return v;
  });
};

// 页面加载
const goodsForm = ref<any>({});
const loading = ref(false);
const fileUrl = localStorage.getItem("picurl");
onMounted(async () => {
  const { query } = useRoute();
  if (query.id) {
    loading.value = true;

    let { data } = await getGoodsDetail(query.id);
    data.recommendIndex = dealDataExcept(data.recommendIndex, 10) || 0;

    // 处理商品规格展示
    let params = {
      pageNum: 1,
      pageSize: 500
    };
    let storeReq = await getStoreSimplePage({ status: 0, ...params });
    let storeList = storeReq.data?.records || [];

    let brandReq = await getBrandPage(params);
    let brandList = brandReq.data?.records || [];

    data.goodsSpecList = data.goodsSpecList.map(v => {
      v.storeBuyPrice = dealDataExcept(v.storeBuyPrice);

      // 辅助条码
      if (v.auxiliaryBraCodeList && v.auxiliaryBraCodeList.length > 0) {
        v.auxiliaryBraCodeList = v.auxiliaryBraCodeList.join(",");
      }

      // 品牌集合
      if (v.goodsSpecBrandRelList) {
        v.brandPriceList = dealBrandList(
          v.goodsSpecBrandRelList,
          storeList,
          brandList
        );
      } else {
        v.goodsSpecBrandRelList = [];
        v.brandPriceList = [];
      }

      return v;
    });

    goodsForm.value = data;
    loading.value = false;
  }
});

defineOptions({
  name: "GoodsDetail"
});
</script>

<template>
  <div v-loading="loading" class="goods-detail">
    <el-card class="w-full mb-[10px]" shadow="always">
      <div
        class="flex items-center cursor-pointer font-bold"
        @click.stop="go(-1)"
      >
        <IconifyIconOffline :icon="arrowLeft" class="mr-2" />
        <div>商品信息</div>
      </div>
      <div class="flex pt-[10px] pl-[10px]">
        <!-- 缩率轮播图 -->
        <div class="w-[500px] h-[405px] mr-[30px]">
          <ThumbsSwiper :file="goodsForm.imageJson" />
        </div>
        <!-- 商品信息 -->
        <div class="flex-1">
          <div class="mb-[10px] text-black font-bold">
            {{ goodsForm.goodsName || "--" }}
          </div>
          <el-form ref="formRef" :model="goodsForm">
            <div class="flex">
              <el-form-item label="商品编码:" class="flex-1">
                <div>{{ goodsForm.goodsCode || "--" }}</div>
              </el-form-item>
              <el-form-item label="商品类目:" class="flex-1">
                <div>{{ goodsForm.categoryName || "--" }}</div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="商品类型:" class="flex-1">
                <DictTag
                  dict-type="PRODUCT_TYPE"
                  :dict-value="goodsForm.goodsType"
                />
              </el-form-item>
              <el-form-item label="关联供应商:" class="flex-1">
                <div>{{ goodsForm.supplierName || "--" }}</div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="计量单位:" class="flex-1">
                <div>{{ goodsForm.unitItemName || "--" }}</div>
              </el-form-item>
              <el-form-item label="起订量:" class="flex-1">
                <div>{{ goodsForm.orderMin || "--" }}</div>
              </el-form-item>
            </div>

            <el-form-item label="状态:">
              <div>
                {{ goodsForm.goodsStatus == 1 ? "已启用" : "已停用" }}
              </div>
            </el-form-item>

            <el-form-item v-if="goodsForm.goodsType == 2" label="预备货:">
              <div>{{ goodsForm.preStockStatus == 1 ? "是" : "否" }}</div>
            </el-form-item>

            <el-form-item label="商品标签:">
              <div v-if="goodsForm.labelList">
                {{ goodsForm.labelList.map(i => i.labelName).join(",") }}
              </div>
            </el-form-item>

            <template v-if="goodsForm.goodsType == 2">
              <el-form-item label="为你推荐:">
                <div>
                  {{ goodsForm.recommendStatus == 1 ? "已推荐" : "不推荐" }}
                </div>
              </el-form-item>
              <div class="flex">
                <el-form-item label="兑换规则:" class="flex-1">
                  <div style="margin: 5px 0; line-height: 22px">
                    {{ goodsForm.ruleDes || "--" }}
                  </div>
                </el-form-item>
                <div class="flex-1" />
              </div>

              <el-form-item label="陈列建议:">
                <div>{{ goodsForm.advise || "--" }}</div>
              </el-form-item>
              <el-form-item label="陈列推荐:">
                <ImageViewer
                  :src="goodsForm.recommendImageJson"
                  radius="8px"
                  show-count="10"
              /></el-form-item>
            </template>

            <el-form-item label="推荐指数:">
              <div>
                <el-rate v-model="goodsForm.recommendIndex" disabled />
              </div>
            </el-form-item>
            <el-form-item label="备注:">
              <div>{{ goodsForm.des || "--" }}</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>

    <!-- 商品规格 -->
    <el-card class="flex-1 mb-[10px]" shadow="always">
      <div class="card-title">商品规格</div>
      <div class="spec-box">
        <div
          v-for="item in goodsForm.goodsSpecList"
          :key="item.id"
          class="spec-item"
        >
          <el-form ref="formRef" :inline="true">
            <div class="flex">
              <el-form-item label="规格:" class="flex-1">
                <ImageViewer
                  :src="
                    item.specImageJson
                      ? item.specImageJson
                      : goodsForm.imageJson
                  "
                  radius="8px"
                />
                <div class="ml-[5px]">{{ item.specName || "主规格" }}</div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="规格编码:" class="flex-1">
                <div>{{ item.specCode || "--" }}</div>
              </el-form-item>
              <el-form-item label="商品条码:" class="flex-1">
                <div>{{ item.barCode || "--" }}</div>
              </el-form-item>
            </div>

            <div class="flex">
              <el-form-item label="辅助条码:" class="flex-1">
                <div>
                  {{ item.auxiliaryBraCodeList || "--" }}
                </div>
              </el-form-item>
              <el-form-item label="商品进价:" class="flex-1">
                <div>{{ dealDataExcept(item.buyPrice) }}</div>
              </el-form-item>
            </div>
          </el-form>
          <pure-table
            row-key="id"
            align-whole="center"
            class="bd-hide"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            max-height="500"
            :row-class-name="iconHide"
            :data="item.brandPriceList"
            :columns="showBrandColumns"
          >
            <template #expand="{ row }">
              <div class="ml-[52px]">
                <pure-table
                  :data="row.storeList"
                  align-whole="center"
                  class="bd-hide"
                  :show-header="false"
                  :columns="showBrandColumns.slice(1)"
                />
              </div>
            </template>
          </pure-table>
        </div>
      </div>
    </el-card>

    <!--  兑换运费规则 、商品详情 -->
    <div class="flex">
      <el-card
        v-if="goodsForm.goodsType == 2"
        class="flex-1 mr-[10px]"
        shadow="always"
      >
        <div class="card-title">兑换运费规则</div>
        <pure-table
          row-key="id"
          align-whole="center"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          :data="goodsForm.goodsExchangeFareRuleList"
          :columns="showFeeColumns"
        />
      </el-card>
      <el-card class="w-[50%]" shadow="always">
        <div class="card-title">商品详情</div>
        <div class="html-box">
          <WangEditor v-model="goodsForm.goodsDetail" disable />
        </div>
      </el-card>
    </div>
  </div>
</template>
<style lang="scss" scoped>
:deep(.bd-hide .el-table--fit .el-table__inner-wrapper:before) {
  background-color: #fff;
}
:deep(.icon-no .el-table__expand-icon) {
  display: none;
}
:deep(.el-card__body) {
  padding: 15px;
}
.goods-detail {
  min-width: 1000px;
}
.el-form-item {
  margin-bottom: 5px;
}
.card-title {
  font-weight: bold;
  margin-bottom: 10px;
}
.spec-box {
  .spec-item {
    padding: 10px;
    border: 1px solid #efefef;
    border-radius: 5px;
    margin-bottom: 20px;
  }
}
.html-box {
  min-height: 400px;
  border: 1px solid #efefef;
  border-radius: 5px;
  padding: 10px;
  img {
    max-width: 100%;
  }
}
</style>
